<template>
    <div class="topbar">
        <div class="wrap">
            <div class="l">欢迎来到我的积分商城</div>
            <div class="r">
                <ul>
                    <li @click="showToastFn">
                        <img  class="headerTu" :src="userInfo.headImg" alt="">
                        <span>用户名：{{userInfo.nickName}}</span>
                        <!-- <img  class="headerTu" src="https://www.wolfcode.cn/data/upload/ueditor/20200410/5e90449b72fbc.png" alt=""> -->
                    </li>
                    <li>我的积分：{{userInfo.coin}}</li>
                    <li>获取积分</li>
                    <li>叩丁狼官网</li>
                    <li class="btn" @click="chanIsShowLoginModalA(true)"  v-show="!isShowCart" >登录</li>
                    <li class="btn car-btn"  v-show="isShowCart" @click="$router.push('/user')">
                        <img src="@/assets/img/cart.png" alt="">
                        <span>购物车</span>
                        <span>{{cartTotal}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapMutations,mapState } from 'vuex'
import {WeixinLoginAPI} from '@/request/api'
export default {
    data () {
        return {
            // cartNum:0,
            // isShowCart:true
        }
    },
    watch:{
        "$route.path":{
            handler(newVal,oldVal){
                console.log(newVal,oldVal)
                let mytoken = localStorage.getItem("x-auth-token")
                this.chanIsShowCart(Boolean(mytoken))
                if(mytoken){
                    this.asyncCharUserInfo();
                }else{
                    //没有用户登录的情况下把数据初始化
                    this.initUserInfo()
                }
            }
        }
    },
    created(){
        // this.$nextTick().then()
        setTimeout(async ()=>{
            //判断地址栏有没有code
            let mycode = this.$route.query.code
            console.log(mycode);
            if(mycode){
                //发送微信扫码登录请求
                let res = await WeixinLoginAPI({
                    code:mycode
                })
                // console.log(res)
                //针对三种情况作出不同情况的处理
                if(res.code==0){
                    //提示微信扫码成功
                    // this.asyncChanIsShowToast({
                    //     msg:"微信扫码登录成功",
                    //     type:"success"
                    // })
                    //登录成功后的逻辑
                    //1 提示登录成功
                    // alert(res.message)
                    this.asyncChanIsShowToast({
                            msg:res.message,
                            type:"success"
                        })
                    //2 保存token 值
                    localStorage.setItem("x-auth-token",res['x-auth-token'])
                    //3 登录状态的切换
                    this.chanIsShowCart(true)
                    
                    //登录成功后之后，删除地址栏上的code
                    this.$router.push(this.$route.path)
                    
                    //登录成功之后获取用户信息
                    this.asyncCharUserInfo()
                    
                }else if(res.code==400){
                    //code失效的时候的情况
                    //1 提示用户重新扫码
                    this.asyncChanIsShowToast({
                        msg:"code失效,需要重新扫码登录",
                        type:"danger"
                    })
                    //2 打开登录框
                    this.chanIsShowLoginModalA(true)
                    
                }else if(res.code==407){
                    //这个微信号，在这个网上还没有绑定手机号
                    //去绑定手机
                    //让用户用手机号重新登录，然后调用绑架接口 参数为手机号 uuid
                    // 1 提示用户微信绑定手机号
                    this.asyncChanIsShowToast({
                        msg:"请先使用手机号登录来绑定微信",
                        type:"warning"
                    })
                    // 2 把登录框打开
                    this.chanIsShowLoginModalA(true)
                    // 3 把uuid保存到本地存储
                    localStorage.setItem("uuid",res.uuid);
                }
            }else{
                //分析：没有code的情况是什么情况
                //1 用户没有扫码登录的操作  || 2 用户已经登录
                let mytoken = localStorage.getItem("x-auth-token")
                this.chanIsShowCart(Boolean(mytoken))
                if(mytoken){
                    this.asyncCharUserInfo();
                }else{
                    //没有用户登录的情况下把数据初始化
                    this.initUserInfo()
                }
            }
            
        },100)
    },
    
    computed:{
        ...mapState({
            isShowCart:state=>state.LoginStatus.isShowCart,
            cartTotal:state=>state.UserInfo.cartTotal,
            userInfo:state=>state.UserInfo.userInfo,
        })

    },
    methods:{
        ...mapMutations({
            chanIsShowLoginModalA:'ShowLoginModal/chanIsShowLoginModal',
            chanIsShowToast:'ToastStatus/chanIsShowToast',
            chanIsShowCart:'LoginStatus/chanIsShowCart',
            initUserInfo:'UserInfo/initUserInfo'
        }),
        ...mapActions({
            asyncChanIsShowToast:'ToastStatus/asyncChanIsShowToast',
            asyncCharUserInfo:'UserInfo/asyncCharUserInfo'
        }),
        showToastFn(){
            //封装思路
            //调用者需要什么功能（那些参数）
            //才去写组件/函数内部逻辑
            //尽可能让调度变的简单
            this.asyncChanIsShowToast({
                msg:"请先登录！！！",
                type:"warning"
            })
            
        }
    }
}
</script>

<style lang = "less" scoped>
@import url('@/assets/css/global.less');
    .topbar{
        background-color: #000;
        height: 40px;
        /* 字体样式 */
        font-size: 14px;
        color: aliceblue;
        font-family: SourceHanSansSC;
        font-weight: 300;
        line-height: 40px;
        .wrap{
            display: flex;
            /* font-size: #fff; */
            /* background-color: #fcf; */
            height: 40px;
            justify-content: space-between;
            .r ul{
                display: flex;
                li{
                    display: flex;
                    align-items: center;
                    margin-left: 30px;
                    cursor: pointer;
                    .headerTu{
                        width: 26px;
                        height: 26px;
                        border-radius: 13px;
                        border: 1px solid #000;
                        margin-right: 6px;
                        
                    }
                    
                    &.btn{
                        width: 124px;
                        height: 40px;
                        background-color: @base-color;
                        justify-content: center;
                    }
                    
                    &.car-btn{
                        
                        :nth-child(2){
                            margin: 0 8px;
                        }
                        :nth-last-child(1){
                            width: 22px;
                            height: 22px;
                            background: #fd604d;
                            border-radius: 11px;
                            text-align: center;
                            line-height: 22px;
                        }
                    }
                }
            }
        }
    }
</style>
